<template>
    <div class="dataset-panel-wrapper">
        <div class="title-font">{{ _dataset_name }} 数据集</div>
        <div class="file-list">
            <el-table
                size="small"
                :data="_labeldata_list"
                style="width: 100; height: 100%"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                highlight-current-row
                @row-click="handleRowClick"
            >
                <el-table-column prop="pairs_id" label="标识" width="60"> </el-table-column>
                <el-table-column prop="name" label="文件名" width="182" show-overflow-tooltip> </el-table-column>
            </el-table>
        </div>
        <div class="custom-pagination">
            <div class="paination-total">{{ formattedTotal }}</div>
            <el-pagination
                v-model:current-page="_current_page"
                :page-size="_page_size"
                :total="_total_count"
                size="small"
                :background="false"
                layout="prev, next, jumper"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import LabelStorageLocal from '@/js/models/LabelStorageLocal';

const emit = defineEmits(['loadData', 'saveData']);

let _labeldata_list = ref([]);
let _page_size = ref(0);
let _total_count = ref(0);
let _page_count = ref(0);
let _current_page = ref(0);
let _current_index = ref(-1);
let _dataset_name = ref('');

const formattedTotal = computed(() => {
    const total = _total_count.value;
    if (total >= 1000000) {
        return (total / 1000000).toFixed(1) + 'M';
    }
    if (total >= 1000) {
        return (total / 1000).toFixed(1) + 'K';
    }
    return total;
});

function headerCellStyle({ row, index }) {
    return {
        color: '#fff',
        'background-color': '#373133'
    };
}

function cellStyle({ row, column, rowIndex, columnIndex }) {
    // console.log(row, column, rowIndex, columnIndex);
    let style = {};

    // console.log(`row.id = ${row.id}, _current_index = ${_current_index.value}`);
    let label_data = _labeldata_list.value[_current_index.value];
    if (row.pairs_id == label_data.pairs_id) {
        style['font-weight'] = 'bold';
        if (columnIndex == 0) {
            style['color'] = '#fff';
            style['background-color'] = 'rgb(196, 74, 74)';
        } else {
            style['background-color'] = 'rgb(233, 187, 187)';
        }
    }

    return style;
}

// dataset_info
async function loadDataset(dataset_info) {
    // 加载dataset列表
    let page_info = await LabelStorageLocal.loadDataset(dataset_info);
    _dataset_name.value = dataset_info.dataset_name;

    // 加载dataset第一页的数据
    _labeldata_list.value = page_info.labeldatas;
    _page_size.value = page_info.per_page;
    _page_count.value = page_info.total_page;
    _total_count.value = page_info.total_count;
    _current_page.value = 1;

    // 默认加载第一张图片
    _current_index.value = 0;
    let label_data = await LabelStorageLocal.getLabelData(0);
    emit('loadData', label_data);
    // console.log(label_data);
}

async function handleRowClick(row, column, event) {
    // 判断当前数据是否需要保存
    LabelStorageLocal.saveLabelData(_current_index.value);

    // 加载新的数据
    let rowIndex = _labeldata_list.value.findIndex((item) => item.pairs_id === row.pairs_id);
    let label_data = await LabelStorageLocal.getLabelData(rowIndex);
    _current_index.value = rowIndex;
    emit('loadData', label_data);
}

async function handleCurrentChange(val) {
    // console.log(`current page: ${val}`);
    _labeldata_list.value = await LabelStorageLocal.getPageData(val);
    _current_index.value = 0;
    let label_data = await LabelStorageLocal.getLabelData(_current_index.value);
    emit('loadData', label_data);
}

async function preLabelData() {
    // console.log('preLabelData');
    // 判断当前数据是否需要保存
    LabelStorageLocal.saveLabelData(_current_index.value);

    if (_current_index.value == 0) {
        if (_current_page.value == 1) {
            return;
        } else {
            _current_page.value = _current_page.value - 1;
            _labeldata_list.value = await LabelStorageLocal.getPageData(_current_page.value);
            _current_index.value = _page_size.value;
        }
    }

    // 加载上一个数据
    _current_index.value = _current_index.value - 1;
    let label_data = await LabelStorageLocal.getLabelData(_current_index.value);
    emit('loadData', label_data);
}

async function nextLabelData() {
    // console.log('nextLabelData');
    // 判断当前数据是否需要保存
    LabelStorageLocal.saveLabelData(_current_index.value);

    if (_current_index.value == _labeldata_list.value.length - 1) {
        if (_current_page.value >= _page_count.value) {
            return;
        } else {
            _current_page.value = _current_page.value + 1;
            _labeldata_list.value = await LabelStorageLocal.getPageData(_current_page.value);
            _current_index.value = -1;
        }
    }

    // 加载下一个数据
    _current_index.value = _current_index.value + 1;
    let label_data = await LabelStorageLocal.getLabelData(_current_index.value);
    emit('loadData', label_data);
}

async function deleteLabelData() {
    // console.log('DatasetPanel::deleteLabelData');
    let result = await LabelStorageLocal.deleteLabelData(_current_index.value);
    if (result.code == 0) {
        _labeldata_list.value = await LabelStorageLocal.getPageData(_current_page.value);
        let label_data = await LabelStorageLocal.getLabelData(_current_index.value);
        emit('loadData', label_data);
    }
}

onMounted(() => {});

onUnmounted(() => {});

defineExpose({ loadDataset, preLabelData, nextLabelData, deleteLabelData });
</script>

<style scoped>
.dataset-panel-wrapper {
    display: block;
    background-color: rgb(69, 65, 65);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.title-font {
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    color: rgb(230, 230, 230);
    text-align: center;
}

.file-list {
    padding: 4px;
    height: calc(100% - 75px);
    overflow: auto;
}

.custom-pagination {
    display: flex;
    margin-left: 1px;
    margin-top: -1px;
}

.custom-pagination :deep(span) {
    color: rgb(230, 230, 230);
}

.custom-pagination :deep(button) {
    margin-left: 5px;
}

.paination-total {
    color: rgb(230, 230, 230);
    margin: 8px;
}
</style>
